<template>
    <div class='search-container'>
        <div class="search-nav">
            <div class="to-center">
                <img src="../assets/logo.png" alt="" class="index-img" @click="goIndex()">
                <!-- 搜索框 -->
                <input class="search-input" type="text" v-model="searchInfo">
                <button class="search-button" @click="search">
                    <i class="el-icon-search"></i>
                </button>

                <!-- 购物车 -->
                <div class="cart-dropdown">
                    <span class="show-cart">
                        <span class="test-item" @click="goCart()">
                            <el-badge :value="cartLen" :max="99"></el-badge>
                            <i class="el-icon-shopping-cart-2"></i>
                            我的购物车
                        </span>
                        <div class="line"></div>
                        <div class="cart-content">
                            <span class="product-alltip">最新加入的商品：</span>
                            <div class="cart-item" v-for="cart in cartList" v-if="cartList.length > 0">
                                <div class="product-img" @click="productDetail(cart.cart.id, cart.sale)">
                                    <img :src="cart.cart.spuImg" alt="">
                                </div>
                                <div class="product-detail" @click="productDetail(cart.cart.id, cart.sale)">
                                    <span v-html="cart.cart.spuDetail.replaceAll('<br>', '\n')"></span>
                                </div>
                                <div class="option">
                                    <li>￥{{ cart.cart.spuPrice }}</li>
                                    <li>
                                        <div @click="delteeCart(cart.cart.id)">删除</div>
                                    </li>
                                </div>

                            </div>
                        </div>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import getUUID from '../utils/uuid';


export default {
    // 模块名字
    name: 'navsearch',
    props: {
        searchVo: {
            keyword: null,
        },
    },
    // 模块数据
    data() {
        //数据
        return {
            cartList: [],
            memberVo: [],
            cartLen: 0,
            searchInfo: '',

            searchList: []
        };
    },

    watch: {
        searchVo: {
            handler(val, oldVal){
                this.searchInfo = this.searchVo.keyword
            },
            deep: true
        }
    },

    methods: {

        /**
         * 搜索
         */
        async search() {
            this.$router.push({
                path: '/member/search',
                query: {
                    search: this.searchInfo
                }
            })
            if (window.location.href.includes("/member/search")) {
                this.$router.go(0)
            }
        },

        /**
         * 商品id，前往商品详情页面
         * @param {*} spuId
         * @param {*} sale
         */
        productDetail(spuId, sale) {
            if (sale != 1) {
                this.$message({
                    type: 'warning',
                    message: '商品已下架或售罄'
                })
                return;
            }
            this.$router.push({
                path: '/product/productDetail',
                query: { spuId: spuId, params: getUUID() }
            })
        },


        /**
         * 删除购物车
         * @param {*} cartId
         */
        delteeCart(cartId) {
            this.$http({
                url: this.$http.adornUrl(`/shitou-cart/shitoucart/cart/removeMemberCart?cartId=${cartId}&memberId=${this.memberVo.id}`),
                method: 'post'
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除购物车成功'
                    })
                    if (this.cartList.length == 1) {
                        this.$router.go(0)
                        return;
                    }
                    this.getMemberCart()
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },


        /**
         * 获得当前用户购物车信息
         */
        getMemberCart() {
            this.$http({
                url: this.$http.adornUrl(`/shitou-cart/shitoucart/cart/getMemberCart/${this.memberVo.id}`),
                method: 'post'
            }).then(({ data }) => {
                if (data.code == 200 ) {
                    this.cartList = data.data==null?[]:data.data
                    this.cartLen = this.cartList.length
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message + 234
                    })
                }
            })
        },

        goCart() {
            if (window.location.href.includes('/member/accountsetting/cart')) {
                this.$router.go(0);
            }
            this.$router.push({ path: '/member/accountsetting/cart' })
        },

        goIndex() {
            let urls = window.location.href;
            let first_index_str = urls.substring(urls.indexOf(':') + 1, urls.length);
            let second_index = first_index_str.substring(first_index_str.indexOf(':') + 1, first_index_str.length);
            let api_begin = second_index.substring(second_index.indexOf("/"), second_index.length)

            if (api_begin.length == 1) {
                this.$router.go(0)
            }
            this.$router.push({ path: '/' })
        }
    },

    async created() {
        let member = await this.$memberInfo()
        if (member != null) {
            this.memberVo = member
            this.getMemberCart()
        }
        if (this.searchVo != null)
            this.searchInfo = this.searchVo.keyword

    }
};
</script>
<style scoped>
@import url("../utils/css/navsearch.css");
</style>
